<template>
	<u-popup :show="show1" mode="bottom" :closeable="true" @close="close" :round="true" borderRadius="20">
		<view class="p-20 pay">
			<view style="line-height: 100rpx;" class="u-border-bottom u-text-center ">选择支付方式</view>
			<view style="line-height: 60rpx;" class="u-flex u-row-between">
				<view>订单金额</view>
				<view>￥{{price}}</view>
			</view>

			<view style="line-height: 60rpx;" class="u-flex u-row-between" v-if="postPrice>0">
				<view>运费</view>
				<view>+￥{{postPrice}}</view>
			</view>

			<view style="line-height: 80rpx;" class="u-flex u-row-between">
				<view>产品金额</view>
				<view style="font-size: 38rpx;color: #F0AD4E;">￥{{payPrice}}</view>
			</view>
			<view style="line-height: 60rpx;" class="u-flex u-row-between" v-if="isExite('yue')">
				<view>账户余额</view>
				<view>￥{{yue}}</view>
			</view>
			<view style="line-height: 60rpx;" class="u-flex u-row-between" v-if="isExite('brokeragePrice')">
				<view>账户佣金</view>
				<view>￥{{brokeragePrice}}</view>
			</view>
			<!-- <view style="line-height: 60rpx;" class="u-flex u-row-between" v-if="isExite('gold')">
				<view>账户金币</view>
				<view>￥{{gold}}</view>
			</view> -->
			<u-radio-group v-model="payType" style="width: 100%;" @change="changePayType">
				<view style="width:100%;margin-bottom: 150rpx;">
					<view style="line-height: 60rpx;" class="u-flex u-row-between" v-if="isExite('weixin')">
						<view>微信支付</view>
						<u-radio name="weixin" active-color="red"></u-radio>
					</view>
					<!-- <view style="line-height: 60rpx;" class="u-flex u-row-between" v-if="isExite('yue')">
						<view>余额支付</view>
						<u-radio name="yue" active-color="red"></u-radio>
					</view> -->
					<view style="line-height: 60rpx;" class="u-flex u-row-between" v-if="isExite('live')">
						<view>虚拟支付</view>
						<u-radio name="live" active-color="red"></u-radio>
					</view>

					<!-- 	<view style="line-height: 60rpx;" class="u-flex u-row-between" v-if="isExite('brokeragePrice')">
						<view>佣金支付</view>
						<u-radio name="brokeragePrice" active-color="red"></u-radio>
					</view> -->
					<!-- 	<view style="line-height: 60rpx;" class="u-flex u-row-between" v-if="isExite('gold')">
						<view>金币支付</view>
						<u-radio name="gold" active-color="red"></u-radio>
					</view> -->
				</view>
			</u-radio-group>
			<view class="btn" @click="payEnb(payType)">{{payType=='live'?'点击后联系推荐人进行实际支付':'确认金额无误并支付'}}</view>
		</view>

		<u-modal :show="showPwd" :showConfirmButton="false" :showCancelButton="false" @close="showPwd=false"
			closeOnClickOverlay>
			<view>
				<view>
					<u--input :type="type" v-model="pwd">
						<template slot="suffix">
							<u-icon name="eye-fill" @click="changeType()" />
						</template>
					</u--input>
				</view>
				<view>
					<view class="btn1" @click="aside()">确认支付</view>
				</view>
			</view>
		</u-modal>

	</u-popup>
</template>

<script>
	export default {
		model: {
			event: 'updateShow',
			prop: 'show'
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			pay: {
				type: Function,
				default: function(payType) {}
			},
			payPrice: {
				type: [String, Number],
				default: 0
			},
			price: {
				type: [String, Number],
				default: 0
			},
			postPrice: {
				type: [String, Number],
				default: 0
			},
			yue: {
				type: [String, Number],
				default: 0
			},
			brokeragePrice: {
				type: [String, Number],
				default: 0
			},
			gold: {
				type: [String, Number],
				default: 0
			},
			payTypes: {
				type: Array,
				default: () => {
					return ['weixin']
				}
			}
		},
		data() {
			return {
				payType: 'weixin',
				show1: false,
				showPwd: false,
				pwd: '',
				type: 'password',
			}
		},
		mounted() {
			this.show1 = this.show
			console.log('111>>>')
			// if (this.payTypes.length > 0) {
			// 	console.log('222222>>', JSON.stringify(this.payTypes[0]))
			// 	this.payType = this.payTypes[0]
			// }
		},
		methods: {
			changePayType() {
				this.$emit("change", this.payType)
			},
			isExite(type) {
				if (!this.payTypes) return false;
				let index = this.payTypes.findIndex(item => item == type)
				return index != -1
			},
			aside() {
				if (!this.pwd || this.pwd.length == 0) {
					return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
				}
				this.pay(this.payType, this.pwd)
			},
			changeType() {
				this.type = this.type == 'text' ? 'password' : 'text'
			},
			close() {
				this.show1 = false
				this.showPwd = false
				this.$emit('updateShow', false)
			},
			open() {
				this.show1 = true
				this.$emit('updateShow', true)
			},
			payEnb(type) {
				if (type == 'yue' || type == 'brokeragePrice') {
					this.pwd = ''
					console.log('>>ji>>>>>>>>>>h>>>', this.pwd)
					this.showPwd = true
				} else {
					this.pay(type)
				}
			}
		},
		watch: {

			payTypes: {
				handler(newName, oldName) {
					console.log(">>>>>>缉拿浏览 ", newName)
					this.payType = this.payTypes[0]
				},
				immediate: true
			}

		}
	}
</script>

<style scoped lang="scss">
	.btn {
		background-color: #ffaa00;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		position: fixed;
		left: 0px;
		bottom: 0px;
		width: 100%;
		color: #FFFFFF;
	}

	.pay {
		font-size: 30rpx;
	}

	.btn1 {
		line-height: 88rpx;
		background: rgba(255, 187, 18, 1);
		box-shadow: 0rpx 6.25rpx 12.5rpx rgba(255, 134, 41, 0.5);
		border-radius: 45.83rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 30rpx;
		width: 400rpx;
	}
</style>
